<template>
  <div class="register">
    <div class="title">欢迎注册</div>
    <el-form 
          :model="registerForm" 
          ref="register"
          :rules="rules"
          :hide-required-asterisk="true"
          :show-message="true"
          status-icon
          >
      <!-- 用户名 -->
      <el-form-item class="item" label="用户" prop="username">
        <el-input
              size="small"
              placeholder="请输入6 ~ 15 位字符，可以是字母 数字 _ -"
              v-model="registerForm.username"
              clearable>
        </el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item class="item" label="密码" prop="password">
        <el-input
              size="small"
              placeholder="请输入6 ~ 12 位字符，可以是字母 数字 . _ -"
              v-model="registerForm.password"
              clearable>
        </el-input>
      </el-form-item>
      <!-- 确认密码 -->
      <el-form-item class="item" label="确认密码" prop="c_password">
        <el-input
              size="small"
              placeholder="请再次输入密码"
              v-model="registerForm.c_password"
              clearable>
        </el-input>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item class="item" label="手机号" prop="phone">
        <el-input
              size="small"
              placeholder="请输入手机号"
              v-model="registerForm.phone"
              clearable>
        </el-input>
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item class="item" label="邮箱" prop="email">
        <div>
        <el-input
              size="small"
              placeholder="请输入邮箱地址"
              v-model="registerForm.email"
              clearable>
           <el-select v-model="selectEmail" slot="append" placeholder="请选择">
            <el-option label="@qq.com" value="1"></el-option>
            <el-option label="@163.com" value="2"></el-option>
            <el-option label="@126.com" value="3"></el-option>
          </el-select>   
        </el-input>
        
        </div>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button type="primary" @click="login('register')" :disabled="isShow">注册并登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Registrer',
  data() {
    // 验证用户名
    const v_username = (rule, value, callback) => {
      const username = /[\w-_]{6,15}$/;
      if (!value) {
        return callback(new Error('用户名不能为空'));
      } 
      // else if (用户名已被注册) {
      //   return this.$message.error('该用户名已存在，请重新注册')
      // } 
      else if (!username.test(value)) {
        return callback(new Error('用户名无效'));
      } else {
        callback();
      }
    };
    // 验证密码
    const v_password = (rule, value, callback) => {
      const passwd = /^[\w-_.]{6,12}$/;

      if (!value) {
        return callback(new Error('请输入密码'));
      } else if (!passwd.test(value)) {
        return callback(new Error('密码无效'));
      } else {
        callback();
      }
    };
    // 确认密码
    const v_c_password = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'));
      } else if (this.registerForm.password !== value) {
        return callback(new Error('两次密码不一致'));
      } else {
        callback();
      }
    };
    // 验证手机号
    const v_phone = (rule, value, callback) => {
      const phone = /^(0|86|17951)?(13[0-9]|15[012356789]|17[5678]|18[0-9]|14[57])[0-9]{8}$/;

      if (!phone.test(this.registerForm.phone)) {
        return callback(new Error('手机号码无效'));
      }
      callback();
    }
    // 验证邮箱
    const v_email = (role, value, callback) => {
      const email = /\w{6,18}$/;

      if (!email.test(this.registerForm.email)) {
        return callback(new Error('邮箱地址无效'));
      }
      callback();
    }
    return {
      registerForm: {
        username: '',
        password: '',
        c_password: '',
        phone: '',
        email: ''
      },
      rules: {
        username: [
          { validator: v_username, trigger: 'blur'}
        ],
        password: [
          { validator: v_password, trigger: 'blur'}
        ],
        c_password: [
          { validator: v_c_password, trigger: 'blur'}
        ],
        phone: [
          { validator: v_phone, trigger: 'blur'}
        ],
        email: [
          { validator: v_email, trigger: 'blur'}
        ]
      },
      selectEmail: '1',
      isShow: false,
    }
  },
  methods: {
    // 登录按钮禁用与激活
    loginBtn() {
      this.$refs['register'].validate(valid => {
        if (valid) {
          alert('成功');
        }
      });
    },
    // 注册并登录
    login(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("欢迎用户:" + this.registerForm.username);

          this.axios.post('http://localhost:3000/data', 
            {
              username: this.registerForm.username,
              password: this.registerForm.password,
              phone: this.registerForm.phone,
              email: this.registerForm.email
            },
          )

          // 前往主页
          this.$router.push('/home')
        } else {
          return false
        }
      });
    },
  },
  created() {
    // this.loginBtn();
  }
}
</script>

<style>
  .register {
    width: 30%;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title {
    text-align: center;
    font-size: 18px;
  }
  .el-form-item {
    margin: 0;
  }
  .item .el-form-item__label {
    line-height: 20px;
  }
  .el-input {
    margin-bottom: 5px;
  }
  .el-select {
    width: 130px;
  }
  .el-button {
    margin-top: 5px;
    width: 100%;
  }
  .el-form-item__error {
    padding: 0;
    top: 5px;
    right: 0;
    left: auto; 
  }
  .el-input__suffix {
    color: #66b1ff;
  }
</style>
